import { nextTick } from 'vue'
import { defineStore } from 'pinia'
import { mainRouter } from '../router'
import { darkTheme } from 'naive-ui'

export const useAppStore = defineStore('app', {
    state: () => {
        return {
            theme: null,
            isLoading: true,
            collapsed: false
        }
    },
    actions: {
        toggleTheme(value) {
            if (value == 'dark') {
                this.theme = darkTheme
            } else if (value == 'light') {
                this.theme = null
            }
        }
    }
})

export const useSiderStore = defineStore('sider', {
    state: () => {
        return {
            menuList: [],
            openKeys: [],
            selectKeys: null
        }
    },
    actions: {
        updateMenuList() {
            let menuList = []
            mainRouter.filter((item) => {
                if (item.children) {
                    let childrenArr = []
                    item.children.filter((child) => {
                        let data = {
                            label: child.meta.title,
                            key: item.path + '/' + child.path,
                            name: child.name
                        }
                        childrenArr.push(data)
                    })
                    if (childrenArr.length > 1) {
                        let data = {
                            label: item.meta.title,
                            key: item.path,
                            name: item.name,
                            icon: item.meta.icon
                        }
                        let len = menuList.push(data)
                        let handledItem = menuList[len - 1]
                        handledItem.children = childrenArr
                        menuList.splice(len - 1, 1, handledItem)
                    } else {
                        let data = {
                            label: childrenArr[0].label,
                            key: childrenArr[0].key,
                            name: childrenArr[0].name,
                            icon: item.meta.icon
                        }
                        menuList.push(data)
                    }
                } else {
                    if (item.name != 'index') {
                        let data = {
                            label: item.meta.title,
                            key: item.path,
                            name: item.name,
                            icon: item.meta.icon
                        }
                        menuList.push(data)
                    }
                }
            })
            this.menuList = menuList
        },
        updateSelect(to) {
            this.openKeys = [to.matched[0].path]
            this.selectKeys = to.path
        }
    }
})

export const useTagStore = defineStore('tag', {
    state: () => {
        return {
            tagList: [
                {
                    title: '工作台',
                    name: 'workplace',
                    fullPath: '/dashboard/workplace'
                }
            ],
            tagListName: ['workplace'],
            tagCurrent: null,
            keepViews: ['workplace'],
            isMounted: true
        }
    },
    actions: {
        addTag(item) {
            let tag = {
                title: item.label,
                name: item.name,
                fullPath: item.key
            }
            this.tagList.push(tag)
            this.tagListName.push(tag.name)
            this.keepViews.push(tag.name)
        },
        closeTag(index) {
            this.tagList.splice(index, 1)
            this.tagListName.splice(index, 1)
            this.keepViews.splice(index, 1)
        },
        removeTag(tags) {
            this.tagList = tags
            this.tagListName = []
            this.keepViews = []
            tags.filter((tag) => {
                this.tagListName.push(tag.name)
                this.keepViews.push(tag.name)
            })
        },
        refreshTag(index, tagname) {
            this.isMounted = false
            this.keepViews = this.keepViews.filter((name) => name != tagname)
            nextTick(() => {
                this.isMounted = true
                this.keepViews.splice(index, 0, tagname)
            })
        },
        currentTag(to) {
            this.tagCurrent = to.name
        }
    }
})

export const useBreadcrumbStore = defineStore('breadcrumb', {
    state: () => {
        return {
            breadcrumbList: []
        }
    },
    actions: {
        updateBreadcrumbList(to) {
            this.breadcrumbList = []
            to.matched.filter((item) => {
                this.breadcrumbList.push(item.meta.title)
            })
        }
    }
})
